<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/common.css"/>
    <link rel="stylesheet" href="/css/index.css"/>
    <style>
        #app {
            padding: 41px 22px 92px;
            background-color: #ffffff;
            width: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            height: 100%;
        }
        .image_2 {
            margin-top: 8px;
            width: 100px;
            height: 106px;
        }
        .section {
            padding: 12px;
            border-radius: 16px;
            background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63ba48a45a7e3f0310215b92/63bbf344c86a890011047e60/16791337361013875711.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .image_4 {
            width: 24px;
            height: 24px;
        }
        .inputBox {
            margin-left: 16px;
            width: 70vw;
            height: 18px;
        }
        .registerButton {
            border-radius: 24px;
            filter: drop-shadow(0px 4px 2px #00000040);
            width: 327px;
            height: 57px;
        }
        .font_1 {
            font-size: 14px;
            font-family: 思源黑体;
            line-height: 13px;
            margin-top: 2vh;
        }
        .text {
            color: #6b7280;
        }
        .title{
            margin-top: 1.5vh;
            margin-bottom: 0.5vh;
        }
        .registerBox{
            margin-top: 4vh;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="flex-col page">
        <div class="flex-row justify-between items-start" style="margin-bottom: 3vh">
            <img
                    class="image_2"
                    src="/image/zhuceTop.png"
            />
        </div>
    </div>
<!--        三个输入框-->
    <div class="flex-col">

            <font class="title">用户名</font>
            <div class="flex-col">
                <div class="flex-row items-center section">
                    <img
                            class="image_4"
                            src="/image/userRegisterIcon.png"
                    />
                    <input class="inputBox" type="text" v-model="user.username">
                </div>
            </div>

            <font class="title">电话号码</font>
            <div class="flex-col">
                <div class="flex-row items-center section">
                    <img
                            class="image_4"
                            src="/image/phoneNumberIcon.png"
                    />
                    <input class="inputBox" type="text" v-model="user.phoneNumber">
                </div>

            <font class="title">密码</font>
            <div class="flex-col">
                <div class="flex-row items-center section">
                    <img
                            class="image_4"
                            src="/image/passwordIcon.png"
                    />
                    <input class="inputBox" type="text" v-model="user.password">
                </div>
            </div>
            <div>
                <input type="checkbox" v-model="isCheckbox" style="float: left;margin: 5px">
                <font style="color: #8c939d;font-size: 1em;float: left">我已阅读并同意</font>
                <el-popover
                        placement="bottom"
                        title="用户协议"
                        width="240"
                        trigger="click"
                        :content="yonghuxieyi">
                    <font
                            tyle="color: #8c939d;font-size: 1em;float: left"
                            slot="reference">《用户协议》</font>
                </el-popover>
            </div>
        </div>
<!--        注册按钮-->
        <div class="flex-col items-center registerBox">
            <div
                    class="registerButton"
                    style="background: url('/image/registerButton.png')"
                    @click="registerNow"
            ></div>
            <div>
                <div class="font_1 text" @click="toLogin">已经拥有账号?</div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el : "#app",
        mounted(){

        },
        methods : {
            registerNow(){
                //1.检查数据格式是否正确
                var c = this.check();
                //2.执行请求逻辑
                if (c) {
                    //校验成功 发送请求
                    axios({
                        method: 'post',
                        url : '/userRegister',
                        data : this.user
                    }).then((resp) => {
                        if (resp.data.code === 1) {
                            window.location.href = "/"
                        }else {
                            this.$message({
                                message : resp.data.msg,
                                type : 'warning'
                            })
                        }
                    })
                }
            },
            check(){
                let username = this.user.username;
                let password = this.user.password;
                let phoneNumber = this.user.phoneNumber;
                if (username.length === 0 || username.indexOf(' ')!== -1){
                    console.log(username)
                    this.$message({
                        message : '请正确填写用户名',
                        type : 'warning'
                    })
                    return false;
                }
                if (phoneNumber.length !== 11 || phoneNumber.indexOf(' ')!== -1 || !phoneNumber.startsWith('1')){
                    console.log(phoneNumber)
                    this.$message({
                        message : '请正确填写电话号码',
                        type : 'warning'
                    })
                    return false;
                }
                if (password.length === 0 || password.indexOf(' ')!== -1){
                    console.log(password)
                    this.$message({
                        message : '请正确填写密码',
                        type : 'warning'
                    })
                    return false;
                }
                if (!this.isCheckbox){
                    this.$message({
                        message : '请同意并勾选用户协议',
                        type : 'warning'
                    })
                    return false;
                }
                return true;
            },
            toLogin(){
                window.location.href = '/';
            }
        },
        data(){
            return {
                isCheckbox : false,
                user: {
                    username: '',
                    password: '',
                    phoneNumber: '',
                },
                visible: false,
                yonghuxieyi: "为使用云曦智划的服务，您应当阅读并遵守《用户协议》（以下简称“本协议”）。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、管辖与法律适用条款，以及开通或使用某项服务的单独协议。限制、免责条款可能以黑体加粗或加下划线的形式提示您重点注意。除非您已阅读并接受本协议所有条款，否则您无权使用云曦智划提供的服务。您使用云曦智划的服务即视为您已阅读并同意上述协议的约束。",

            };
        }
    })
</script>
</html>